<template>
    <div>
        <el-row>
            <el-col :span="19">
                <el-page-header @back="back" content="创建商品">
                </el-page-header>
            </el-col>
            <el-col :span="5">
                <el-button-group>
                    <el-button icon="el-icon-view" style="border: 0px">预览</el-button>
                    <el-button type="primary" plain style="border: 0px" @click="save">仅保存</el-button>
                    <el-button type="primary" style="border: 0px" @click="shelves">保存并上架</el-button>
                </el-button-group>
            </el-col>
        </el-row>
        <div style="width: 10%;height: 300px;display:inline-block;vertical-align: top;">
            <el-steps direction="vertical" :active="active">
                <el-step title="基础信息"></el-step>
                <el-step title="规格信息"></el-step>
            </el-steps>
        </div>

        <div style="width: 89%;height: 1150px;display: inline-block;vertical-align: top;" align="center">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
                <div v-if="active == 0">
                    <div class="commodity"></div>
                    <el-card style="width: 70%" align="left">
                        <h3>&nbsp;&nbsp;&nbsp;商品信息</h3>
                            <el-form-item label="商品类型" prop="type">
                                <el-radio-group v-model="ruleForm.type">
                                    <el-radio label="实体商品" value="1"></el-radio>
                                    <el-radio label="虚拟商品" value="2"></el-radio>
                                </el-radio-group>
                                <a style="font-size: 10px">&nbsp;&nbsp;&nbsp;&nbsp;*实物类商品开启后，支付将手机用户手机和收货地址</a>
                            </el-form-item>
                            <el-form-item label="标题名称" prop="name"><br>
                                <el-input style="width: 550px" v-model="ruleForm.name" placeholder="请输入标题名称" maxlength="20" show-word-limit></el-input>
                            </el-form-item>
                            <el-form-item label="商品描述" prop="message"><br>
                                    <el-input
                                            style="width: 550px"
                                            type="textarea"
                                            placeholder="请输入商品描述"
                                            v-model="ruleForm.message"
                                            :autosize="{ minRows: 6, maxRows: 10}"
                                            maxlength="50"
                                            show-word-limit>
                                    </el-input>
                            </el-form-item>
                    </el-card>
                    <div class="commodity"></div>
                    <el-card style="width: 70%" align="left">
                        <h3>商品Banner</h3>
                        <el-form-item prop="image">
                            <el-upload action="#" list-type="picture-card" :auto-upload="false">
                                <i slot="default" class="el-icon-plus"></i>
                                <div slot="file" slot-scope="{file}">
                                    <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                                </div>
                            </el-upload>
                            <el-dialog :visible.sync="dialogVisible">
                                <img width="100%" :src="ruleForm.image" alt="">
                            </el-dialog>
                        </el-form-item>
                        <a style="font-size: 10px">第一张默认为封面，可拖拽调整顺序（比例1:1，2M以内，JPG/PNG格式）</a>
                    </el-card>
                    <div class="commodity"></div>
                    <el-card style="width: 70%" align="left">
                        <h3>商品详情</h3>
                        <el-form-item prop="details">
                            <el-input
                                    type="textarea"
                                    placeholder="请输入商品描述"
                                    v-model="ruleForm.details"
                                    :autosize="{ minRows: 6, maxRows: 10}"
                                    maxlength="50"
                                    show-word-limit>
                            </el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button @click="next">下一步</el-button>
                        </el-form-item>
                    </el-card>
                </div>
                <div v-if="active == 1">
                    <el-card style="width: 70%" align="left">
                        <el-form-item label="商品规格" prop="specifications"><br>
                            <el-radio-group v-model="ruleForm.specifications">
                                <el-radio label="统一规格" value="1"></el-radio>
                                <el-radio label="多级规格" value="2"></el-radio>
                            </el-radio-group>
                            <a style="font-size: 10px">&nbsp;&nbsp;&nbsp;&nbsp;*如有颜色、尺码等多种规格，请选择多级规格</a>
                        </el-form-item>
                    </el-card>
                    <div class="commodity"></div>
                    <el-card style="width: 70%" align="left">
                        <h3>价格库存</h3>
                        <el-row>
                            <el-col :span="5">
                                <el-form-item prop="standard" label="标准价格(￥)"><br>
                                    <el-input v-model="ruleForm.standard" placeholder="请输入" maxlength="8" show-word-limit></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="5">
                                <el-form-item prop="original" label="划线价格(选填)">
                                    <el-input v-model="ruleForm.original" placeholder="请输入" maxlength="8" show-word-limit></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-form-item prop="inventory" label="库存量"><br>
                            <el-input-number v-model="ruleForm.inventory" controls-position="right" :min="0"></el-input-number>
                        </el-form-item>
                        <el-button type="primary" @click="up">上一步</el-button>
                    </el-card>

                </div>
            </el-form>

        </div>



    </div>
</template>

<script>
export default {
    name: "commodityAdd",
    data() {
        return {
            active: 0,
            dialogVisible: false,
            ruleForm: {
                type: '',
                name: '',
                message: '',
                image: '',
                details: '',

                specifications: '',
                standard: '',
                original: '',
                inventory: ''
            },
            rules: {
                type: [
                    {required: true, message: '请选择商品类型', trigger: 'change'}
                ],
                name: [
                    {required: true, message: '请输入标题名称', trigger: 'blur'},
                    {min: 1, max: 20, message: '最多20个字符', trigger: 'blur'}
                ],
                message: [
                    {required: true, message: '请输入商品描述', trigger: 'blur'},
                    {min: 0, max: 50, message: '最多50个字符', trigger: 'blur'}
                ],
                standard: [
                    {required: true, message: '请输入标准价格', trigger: 'blur'},
                    {min: 1, max: 8, message: '最多8个字符', trigger: 'blur'}
                ],
                inventory: [
                    {required: true, message: '请确保库存充足', trigger: 'change'}
                ],
            }
        }
    },
    methods: {
        back() {
            this.$emit("currentHandler", "list")
        },
        next() {
            this.active = 1
        },
        up() {
            this.active = 0
        },
        save() {
          this.$message({
              message: '保存成功',
              type: 'success'
          })
            this.back()
        },
        shelves() {
            this.$message({
                message: '上架成功',
                type: 'success'
            })
            this.back()
        },

    }
}
</script>

<style scoped>
.commodity{
    height: 20px;
}
</style>